<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div class="innerBox">
        <div class="item nobg" >
			<!-- @click="goOther(1)" -->
          <div class="leftInner">
            <p class="title">{{ $t("昵称") }}</p>
          </div>
          <div class="rightInner">
            <p class="text">{{ userInfo.nickname }}</p>
          </div>
        </div>
      </div>
      <div class="innerBox">
        <div class="item" @click="goOther(2)">
          <div class="leftInner">
            <p class="title">{{ $t("设置提现密码") }}</p>
          </div>
        </div>
        <div class="item" @click="goOther(3)">
          <div class="leftInner">
            <p class="title">{{ $t("修改登录密码") }}</p>
          </div>
        </div>
      </div>
      <div class="innerBox innerBox02"  v-if="false">
        <div class="item" style="margin-top: 0;" @click="goOther(4)">
          <div class="leftInner">
            <p class="title">{{ $t("语言切换") }}</p>
          </div>
          <div class="rightInner">
            <p class="text">{{ langName }}</p>
          </div>
        </div>
        <div class="item" @click="goOther(5)">
          <div class="leftInner">
            <p class="title">{{ $t("login.切换线路") }}</p>
          </div>
          <div class="rightInner">
            <p class="text">{{ $t("线路2") }}</p>
          </div>
        </div>
        <!-- <div class="item">
          <van-button block type="danger" @click="goOut">{{
            $t("退出登录")
          }}</van-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "setting",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("设置中心"),
        close: false,
        btn: "",
      },
      userInfo: {},
      langName: localStorage.getItem('langName'),
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $postAxios(api.getUserInfo, {}, (res) => {
        if (res.code == 0) {
          this.userInfo = res.data;
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 跳转页面
    goOther(val) {
      if (val == 1) {
        this.$router.push("/changeUsername");
      } else if (val == 2) {
        this.$router.push("/withdrawalPassword");
      } else if (val == 3) {
        this.$router.push("/loginPassword");
      } else if (val == 4) {
        this.$router.push("/switchLanguage");
      } else if (val == 5) {
        this.$router.push("/switchLine");
      }
    },
    // 退出登录
    goOut() {
      $postAxios(api.loginOut, {}, (res) => {
        if (res.code == 0) {
			window.localStorage.removeItem("token");
          this.$toast(this.$t("退出成功"));
          setTimeout(() => {
              this.$router.push("/login");
          }, 600)
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 40px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
  background-color: #21212b;
  .content {
	margin: 10px;
    .innerBox {
      margin-bottom: 10px;
	  padding: 10px 16px;
	  background-color: #262633;
	  border-radius: 16px;
	  box-sizing: border-box;
      // background-color: #fff;
      .item {
        padding-right: 10px;
        height: 42px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        color: #fff;
        background: url("../../assets/img/right.png") no-repeat right center;
        background-size: 6px auto;
        // border-bottom: 1px solid #e5e5e5;
        .leftInner {
          font-size: 14px;
        }
        .rightInner {
          margin: 0 5px;
          color: #fff;
          font-size: 14px;
        }
        &:last-child {
          border-bottom: none;
        }
      }
	  .item.nobg{
		  background: none;
		  padding-right: 0;
	  }
      &.innerBox02 {
		height: fit-content;
		// padding-bottom: 16px;
        .item {
          &:last-child {
            padding-right: 0;
            background: none;
			margin-top: 20px;
            .van-button {
              // margin-top: 30px;
			  height: 40px;
              background: #edd33a;
              border-radius: 5px;
			  color: #333;
              border-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>